<template>
  <div class="content">
    <el-form ref="form" :model="form" label-width="100px" size="mini" :inline="true">

      <el-form-item label="起止时间：">
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          style="width:180px"
          size="mini"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
        -
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          style="width:180px"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="学校：" v-show="showSchool">
        <el-select
          clearable
          v-model="form.deptId"
          @change="gradeList(form.deptId)"
          placeholder="请选择所属学校"
          size="mini"
          style="width:150px"
        >
          <el-option :label="item.name" :value="item.id" v-for="item in schoolList" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户类别：">
        <el-select clearable v-model="form.classStatus" placeholder="请选择类别" style="width:150px" @change="checkClass">
          <el-option label="学生" value="1"></el-option>
          <el-option label="教师" value="2"></el-option>
          <el-option label="访客" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="年级：" v-show="showClassStatus">
        <el-select
          clearable
          v-model="form.glassId"
          @change="classList(form.glassId)"
          placeholder="请选择年级"
          size="mini"
          style="width:150px"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item,index) in gradeData"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级：" v-show="showClassStatus">
        <el-select clearable v-model="form.classId" placeholder="请选择班级" size="mini" style="width:150px">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item,index) in classData"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-button type="primary" size="mini" @click="common" class="btn"><i class="fa fa-search"
                                                           style="margin-right:5px;"></i>查询
      </el-button>
      <el-button type="primary" @click="excelExport" size="mini"><i class="fa fa-arrow-down"
                                               style="margin-right:5px;"></i>导出
      </el-button>

    </el-form>


    <div class="title">{{dateStart}} - {{dateEnd}}<span>{{className}} 用户充值汇总表</span></div>
    <template>
      <el-table :data="tableData" v-loading="loading" show-summary size="mini" style="width: 100%;margin-top:30px">
        <el-table-column prop="uName" fixed label="用户类别"></el-table-column>
        <el-table-column prop="count" label="充值笔数（笔）"></el-table-column>
        <el-table-column prop="sum" label="充值总金额（元）"></el-table-column>

      </el-table>
    </template>

  </div>
</template>

<script>
  import Cookies from 'js-cookie'

  export default {
    name: 'Recharge',

    data() {
      return {
        url: this.$Config.url,
        loading: false,//表格加载中控制
        showClassStatus: false,//控制年纪班级展示

        schoolList: [],//学校列表
        gradeData:[],//年纪列表
        classData:[],//班级列表

        form: {
          deptId:"",//选中的学校
          glassId: '',//选中的年级
          classId: '',//选中的班级

          startTime:"",//查询开始时间
          endTime:"",//查询结束时间
          classStatus: '',//选中的当前类型

        },
        tableData: [],

        showSchool:true//控制学校的显示隐藏
      }
    },
    computed:{
      dateStart(){
        if(typeof this.form.startTime=="object"){
          return this.$Config.dateFormat(this.form.startTime)
        }else{
          return this.form.startTime
        }
      },
      dateEnd(){
        if(typeof this.form.endTime=="object"){
          return this.$Config.dateFormat(this.form.endTime)
        }else{
          return this.form.endTime
        }
      },
      className(){
        if(this.form.classStatus==""){
          return "全部"
        }else if(this.form.classStatus=="1"){
          return "学生"
        }else if(this.form.classStatus=="2"){
          return "教师"
        }else{
          return "访客"
        }
      }
    },
    mounted() {
      this.form.startTime=new Date(this.$Config.getTime());
      this.form.endTime=new Date();
      const deptId = JSON.parse(localStorage.getItem("userInfo")).deptId
      if(deptId){
        this.form.deptId=deptId;
        this.showSchool=false;
        this.gradeList(deptId)
      }else{
        this.showSchool=true
        this.getSchool()
      }
      // this.common()

    },
    methods: {
      /**
       * 导出
       */
      excelExport() {
        let deptIdNew="";

        const deptId = JSON.parse(localStorage.getItem("userInfo")).deptId;

        if(deptId==null){//管理员登录
          if(this.form.deptId==""){
            this.$message({
              message: '请先选择学校',
              type: 'warning'
            });
            return
          }else{
            deptIdNew=this.form.deptId
          }
        }else{
          deptIdNew=deptId
        }

        var divFrame = window.parent.document.getElementById(
          "downLoadListFrame"
        );
        //判断是否存在，如果存在先移除，再重新创建
        if (divFrame != null) {
          window.parent.document.body.removeChild(divFrame);
        }
        var iframe = window.parent.document.createElement("iframe");
        iframe.setAttribute("id", "downLoadListFrame");
        //download_file.id = "downFrame";
        window.parent.document.body.appendChild(iframe);
        divFrame = window.parent.document.getElementById("downLoadListFrame");
        //隐式调用，（注意：window.parent.document 适应对于，farme内部代码，调用frame 外部dom；如果项目未用frame，改写成 document即可）
        divFrame.src = `${this.url}/admin/rechargeorder/data/export?deptId=${deptIdNew}&startTime=${typeof this.form.startTime=="object"?this.$Config.dateFormat(this.form.startTime):this.form.startTime}&endTime=${typeof this.form.endTime=="object"?this.$Config.dateFormat(this.form.endTime):this.form.endTime}&userType=${this.form.classStatus}&gradeId=${this.form.glassId}&classId=${this.form.classId}`;
        divFrame.style.display = "none";

      },
      /**
       * 查询学校
       */
      getSchool() {
        const that = this
        this.$axios
          .get(that.url + '/admin/dept/list', {
            headers: {
              'x-baie-admin-token': Cookies.get('token')
            }
          })
          .then(function(res) {
            if (res.data.code == 200) {
              that.schoolList = res.data.data
            } else {
              that.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      },
      gradeList(id) {
        console.log(id)
        const that = this;
        this.$axios
          .get(that.url + "/admin/grade/list", {
            params: {
              deptId: id
            },
            headers: {
              "x-baie-admin-token": Cookies.get("token")
            }
          })
          .then(function(res) {
            if (res.data.code == 200) {
              that.gradeData = res.data.data;

              console.log(res.data.data)
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      classList(id) {
        const that = this;
        that.form.classId = "";
        this.$axios
          .get(that.url + "/admin/class/list", {
            params: {
              gradeId: id
            },
            headers: {
              "x-baie-admin-token": Cookies.get("token")
            }
          })
          .then(function(res) {
            if (res.data.code == 200) {
              that.classData = res.data.data;
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      /**
       * 选择老师 学生 还是访客
       */
      checkClass() {
        if (this.form.classStatus == '1') {//筛选到学生
          this.showClassStatus = true
        } else {
          this.showClassStatus = false

        //  清空 年级班级
          this.form.glassId="";
          this.form.classId="";
        }

      },
      common(pageNo = 1, pageSize = 10) {
        const that = this
        that.loading = true
        const requestData={
          deptId: this.form.deptId,//机构id
          startTime:typeof this.form.startTime=="object"?this.$Config.dateFormat(this.form.startTime):this.form.startTime,//开始时间
          endTime:typeof this.form.endTime=="object"?this.$Config.dateFormat(this.form.endTime):this.form.endTime,//结束时间
          userType:this.form.classStatus,//用户类型
          gradeId:this.form.glassId,//年级id
          classId:this.form.classId,//班级id
        }
        this.$axios
          .get(that.url + '/admin/rechargeorder/data/report', {
            params:requestData,
            headers: {
              'x-baie-admin-token': Cookies.get('token')
            }
          })
          .then(function(res) {
            that.loading = false
            if (res.data.code == 200) {
              that.tableData = res.data.data
            } else {
              that.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
          })
          .catch(function(error) {
            that.loading = false
            console.log(error)
          })
      },
      handleClick(row) {
        console.log(row)
      }
    }
  }
</script>

<style scoped lang="scss">
  .title {
    text-align: center;
    font-size: 18px;
    padding: 20px 0 10px;
    font-weight: bold;

    span {
      margin-left: 10px;
    }
  }

  .upload {
    display: inline-block;
  }

  .button_list {
    margin-bottom: 10px;
  }

  .content {
    text-align: left;
  }

  .el-divider {
    margin: 10px 0;
  }


  .el-form-item {
    margin-bottom: 11px;
  }
</style>
